<template>
  <div>
    <div>{{ title }}</div>
    <button @click="getParent">子组件中获取父组件实例</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ''
    }
  },
  methods: {
    getParent() {
      // 获取子组件它的父组件实例
      // console.log(this.$parent)
      // this.title = this.$parent.title

      // 获取根组件实例 
      // 在vue3中指的是App.vue组件实例
      // 在vue2中指的是 new Vue({data})
      console.log(this.$root)
    }
  }
}
</script>

<style lang="scss" scoped></style>
